<template>
  <div>
    <a-card direction="vertical" :size="12" fill :title="`成品酒出库详情`">
      <OutDetialSearch
        ref="outDetialSearch"
        :wineTypeList="wineTypeList"
        :getOutList="getOutList"
      />
      <a-table
        :columns="columns"
        :data="outData"
        size="large"
        :pagination="pagination"
        @page-change="handlePageChange"
        :bordered="{ wrapper: true, cell: true }"
      >
        <!-- 酒类 -->
        <template #wine_name="{ record }">
          <span>{{ getWineName(record.winetype_id) }}</span>
        </template>
        <!-- 规格 -->
        <template #guige="{ record }">
          <span>{{ getGuige(record.winetype_id) }}</span>
        </template>
        <!-- 出库数量 -->
        <template #out_num="{ record }">
          <span>{{ record.out_num }}箱（{{ getTotal(record) }}瓶）</span>
        </template>
      </a-table></a-card
    >
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { getWineOutList } from '@/api/storeroom';
import { getWineTypeList } from '@/api/winetype';
import OutDetialSearch from './outDetialSearch.vue';

const outDetialSearch = ref(null);
const outData = ref([]);
const wineTypeList = ref([]);
const pagination = reactive({
  current: 1,
  total: 0,
  pageSize: 10,
});
const handlePageChange = (page) => {
  getOutList(page);
};
const getOutList = async (currentPage = 1) => {
  outData.value = [];
  let params = outDetialSearch.value.form;
  params.begin_time = '';
  params.end_time = '';
  if (params.chuku_date.length > 0) {
    params.begin_time = params.chuku_date[0];
    params.end_time = params.chuku_date[1];
  }

  params.current = currentPage;
  pagination.current = currentPage;
  const { data, code } = await getWineOutList(params);
  if (code === 200) {
    pagination.total = data.total;
    outData.value = data.records;
  }
};

const getWineTypeInfo = async () => {
  const { data, code } = await getWineTypeList();
  if (code === 200) {
    wineTypeList.value = data;
  }
};
getWineTypeInfo();
const getWineName = (id: number) => {
  const wine = wineTypeList.value.find((item) => item.wine_id === id);
  return wine?.wine_name;
};
const getGuige = (id: number) => {
  const wine = wineTypeList.value.find((item) => item.wine_id === id);
  return `${wine.wine_alcohol}%vol/${wine.wine_case}瓶/箱`;
};
const getTotal = (record) => {
  const wine = wineTypeList.value.find(
    (item) => item.wine_id === record.winetype_id
  );
  return record.out_num * wine.wine_case;
};

defineExpose({
  getOutList,
});
const columns = ref([
  {
    title: '#',
    dataIndex: 'id',
    width: 80,
    align: 'center',
  },
  {
    title: '酒类',
    slotName: 'wine_name',
    align: 'center',
  },
  {
    title: '规格',
    slotName: 'guige',
    align: 'center',
  },
  {
    title: '出库数量',
    slotName: 'out_num',
    align: 'center',
  },
  {
    title: '出库时间',
    dataIndex: 'out_date',
    align: 'center',
  },
  {
    title: '备注',
    dataIndex: 'out_remark',
    align: 'center',
  },
]);

nextTick(() => {
  getOutList();
});
</script>

<style lang="less" scoped></style>